import React, {Component} from 'react';
import {connect} from 'react-redux';
import {fetchProductionLists, fetchProductionClassify} from '../../actions/productionAction';
import {addToCart} from '../../actions/shopCartAction';
import NavLink from '../NavLink';
class Production extends Component {
    constructor() {
        super();
        this.state = {
            dataSource: ""
        };
    }
    getTarget(e){
        var typeId=e.target.getAttribute('data-typeId');
        console.log(typeId)
        var params="typeId="+typeId;
        this
        .props
        .fetchProductionLists(params);
        this.setState({dataSource:params})
    }
    changePage(e){
        const page = e.target.getAttribute('data-page');
        const typeId=this.state.dataSource;
        const params = "page="+page+'&'+typeId;
        this.props.fetchProductionLists(params)
    }
    addCart(e){
        const idx = e.target.getAttribute('data-idx');
        const addToCartProduct = this.props.productionLists.rows[idx];
        this.props.addToCart(addToCartProduct)
        console.log(this.props)
    }
    componentWillMount() {
        this
            .props
            .fetchProductionClassify();
        this
            .props
            .fetchProductionLists();
    }
    render() {
        //获取产品分类
        
        const productionClassify = this.props.productionClassify;
        if (productionClassify) {
            var classifyArr = [];
            let len = productionClassify.length;
            for (let i = 0; i < len; i++) {
                classifyArr.push(
                    <li key={productionClassify[i]._id}>
                       <a href="javascript:void(0)" onClick={ (e)=>this.getTarget(e)} data-typeId={productionClassify[i]._id}> {productionClassify[i].title}</a>
                    </li>
                )
            }
        }
        //获取产品
        const productionLists = this.props.productionLists.rows;
        if (productionLists&&productionLists.length>0) {
            var listsArr = [];
            let len = productionLists.length;
            for (let i = 0; i < len; i++) {
                    listsArr.push(
                        <div className="col-lg-4 clo-md-6" key={productionLists[i]._id}>
                         <NavLink to={{pathname:"/production/"+productionLists[i]._id,state:{data:productionLists[i].typeId} }}>
                        <img
                          className="img-circle"
                          src={`http://localhost:3000/${productionLists[i].img.filename}`}
                          alt="Generic placeholder image"
                          width="140"
                          height="140"/>
                          </NavLink>                     
                         <div  className='production_slice'>
                         <div style={{color:'red',fontSize:'16px',fontFamily: 'Verdana',marginTop:'20px'}}><i>￥</i><em style={{fontSize:'20px'}}>{productionLists[i].price}</em></div>
                        <NavLink to={{pathname:"/production/"+productionLists[i]._id,state:{data:productionLists[i].typeId} }}>                                                
                          <div
                            dangerouslySetInnerHTML={{
                            __html: productionLists[i].name
                          }}>                          
                          </div>    
                                           
                        </NavLink>   
                        <p>卖家:{productionLists[i].seller}</p>   
                        <button type="button" className="btn btn-danger" data-idx={i}  onClick={ (e)=> {this.addCart(e)}}>加入购物车</button>                  
                        </div>

                      </div>
                    )
                }
        }else{
            return(
                <div>
                <ul className="nav nav-pills">
                    {classifyArr}
                    </ul>
                    <div className="container marketing">
                    <div className="row">
                       <div>未获取到数据  请刷新重试</div>
                    </div>
                    </div>
                </div>
            )
        }
        const pages= this.props.productionLists.pages
        var outputPages = [];
        if(productionLists){
            var len=pages;
            for(var i=1;i<=len;i++){
                outputPages.push(
                    <li key={i}><a href="javascript:void(0)" onClick={ (e)=>this.changePage(e) } data-page={i} >{i}</a></li>
                )
            }
        }
        return (
            <div>
                <ul className="nav nav-pills">
                <li>
                <a href="javascript:void(0)" onClick={ (e)=>this.getTarget(e)} data-typeId=''  style={{color:'red'}}> 全部产品</a>
             </li>
                {classifyArr}
                    </ul>
                <div className="container marketing">
                    <div className="row">
                        {listsArr}    
                    </div>
                    <nav aria-label="..." id="pageNav">
                        <ul className="pagination" id="pageUl">
                            {outputPages}
                        </ul>
                    </nav>
                    
                </div>
            </div>
        )
    }
}
const getValue = (state) => {
    return {productionLists: state.productionReducer.productionLists, 
        productionClassify: state.productionReducer.productionClassify,
        carts:state.shopCartReducer.carts
    }
}
const productionContext = connect(getValue, {fetchProductionLists, fetchProductionClassify,addToCart})(Production)
module.exports = productionContext;